package cn.edu.baiyunu.myapplication.ui.home

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.ExperimentalTextApi
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.edu.baiyunu.myapplication.ui.components.UsageFlowItem

/**
 * 使用流程部分组件 - 按照原型图样式重新设计
 */
@OptIn(ExperimentalTextApi::class)
@Composable
fun UsageFlowSection(
    usageFlows: List<HomeViewModel.UsageFlow>,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        colors = CardDefaults.cardColors(
            containerColor = Color.White.copy(alpha = 0.7f)
        ),
        elevation = CardDefaults.cardElevation(defaultElevation = 0.dp),
        shape = RoundedCornerShape(24.dp)
    ) {
        Column(
            modifier = Modifier.padding(24.dp)
        ) {
            // 标题
            Text(
                text = "使用流程",
                style = TextStyle(
                    brush = Brush.horizontalGradient(
                        colors = listOf(
                            Color(0xFF4F46E5),
                            Color(0xFF7E22CE)
                        )
                    ),
                    fontSize = MaterialTheme.typography.titleLarge.fontSize,
                    fontWeight = FontWeight.SemiBold
                ),
                modifier = Modifier.padding(bottom = 24.dp)
            )
            
            // 流程步骤列表 - 水平排列
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
            ) {
                // 使用Row代替LazyRow，因为项目数固定为4个
                androidx.compose.foundation.layout.Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceEvenly
                ) {
                    usageFlows.forEach { usageFlow ->
                        UsageFlowItemGlass(
                            usageFlow = usageFlow,
                            modifier = Modifier.weight(1f)
                        )
                    }
                }
            }
        }
    }
}

/**
 * 玻璃效果使用流程项组件
 */
@Composable
private fun UsageFlowItemGlass(
    usageFlow: HomeViewModel.UsageFlow,
    modifier: Modifier = Modifier
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.padding(8.dp)
    ) {
        // 图标和步骤编号
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.padding(bottom = 8.dp)
        ) {
            // 圆形图标背景
            Surface(
                shape = CircleShape,
                color = Color.White.copy(alpha = 0.7f),
                modifier = Modifier.size(64.dp)
            ) {
                Box(contentAlignment = Alignment.Center) {
                    // 使用文本替代Icon组件，因为需要一个渐变色的图标
                    Text(
                        text = when (usageFlow.iconName) {
                            "camera" -> "📷"
                            "ruler-combined" -> "📏"
                            "sliders-h" -> "🎚️"
                            "download" -> "💾"
                            else -> "📷"
                        },
                        fontSize = 24.sp,
                        textAlign = TextAlign.Center
                    )
                }
            }
            
            // 步骤数字圆形标记
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .offset(x = 20.dp, y = (-20).dp)
                    .size(24.dp)
                    .background(
                        brush = Brush.linearGradient(
                            colors = listOf(
                                Color(0xFF4F46E5),
                                Color(0xFF7E22CE)
                            )
                        ),
                        shape = CircleShape
                    )
            ) {
                Text(
                    text = usageFlow.step.toString(),
                    color = Color.White,
                    fontSize = 12.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        }
        
        // 标题
        Text(
            text = usageFlow.title,
            style = MaterialTheme.typography.bodyMedium,
            fontWeight = FontWeight.Medium,
            textAlign = TextAlign.Center,
            color = Color(0xFF1E293B) // slate-800
        )
        
        // 描述
        Text(
            text = usageFlow.description,
            style = MaterialTheme.typography.bodySmall,
            fontSize = 12.sp,
            textAlign = TextAlign.Center,
            color = Color(0xFF64748B), // slate-500
            modifier = Modifier.padding(top = 2.dp)
        )
    }
} 